<template>
	<view class="savepadding">
		<uni-list>
			<view class="item" style="padding: 0;" v-for="(item, index) in listData" :key="index">
				<u-form ref="uform" label-width="auto">
					
					<u-form-item label="商业险种" @click="pickerShowClick(index)" borderBottom>
						<u-input 
						:value="item.commercialInsuranceName"
					    disabled disabledColor="#ffffff"
					    border="none"
						inputAlign="right" 
						placeholder="请选择商业险种" 
						type="select"
						></u-input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					
					<u-form-item label="险种保额/元" borderBottom>
						<u-input 
						v-model="item.amountInsured"
						inputAlign="right" 
						border="none"
						type="digit"
						placeholder="请输入险种保费" 
						></u-input>
					</u-form-item>
					
					<u-form-item label="险种保费/元" borderBottom>
						<u-input 
						v-model="item.insuranceExpenses"
						inputAlign="right" 
						border="none"
						type="digit"
						placeholder="请输入险种保额" 
						></u-input>
					</u-form-item>
				</u-form>
				
				<text v-if="index != 0" class="delete" @click="deletItem(index)">删除</text>
			</view>
			<view style="margin: 20rpx; padding-bottom: 130rpx;">
				<button class="list-add" @click="addInsurance">+继续添加</button>
			</view>
		</uni-list>
		
		
		<view class="bottom">
			<button class="bottom-add" @click="save">保存</button>
		</view>
		
		<!-- 商业险种 -->
		<u-picker mode="selector" :show="pickerShow" :default-selector="[0]" :columns="insuranceTypeList"
			keyName="value" @confirm="pickerConfim()" @cancel="pickerShow=false"></u-picker>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				currentIndex:0,
				pickerShow:false,
				insuranceTypeList:[],
				listData:[{
					commercialInsuranceName: '',
					commercialInsuranceCode: '',
					amountInsured: '',
					insuranceExpenses: ''
				 }	
				]
			}
		},
		
		onLoad(options) {
			
			if(!uni.$u.test.isEmpty(options.insuranceRecordList)){
				var data = JSON.parse(options.insuranceRecordList);//字符串转对象
				if(data.length > 0) {
					this.listData = data;
				}
			}
			
		 	this.insuranceTypeList = [this.$store.state.params.getCarCommon.insuranceType];
		},
		
		methods: {
			
			pickerShowClick(index) {
				this.pickerShow = true;
				this.currentIndex = index;
			},
			
			pickerConfim(e) {
				this.pickerShow = false;
				
				console.log('this.insuranceTypeList', this.insuranceTypeList);
				
				// let obj = this.insuranceTypeList[0][index];
				let currentItem = this.listData[this.currentIndex];
				currentItem.commercialInsuranceName = e.value[0].value;
				currentItem.commercialInsuranceCode = e.value[0].code;
				
			},
			//添加新的险种
			addInsurance() {
				let obj = {
					commercialInsuranceName: '',
					commercialInsuranceCode: '',
					amountInsured: '',
					insuranceExpenses: ''
				}
				this.listData.push(obj);
			},
			
			deletItem(index) {
				this.listData.splice(index, 1);
			},
			
			//保存
			save() {
				
				console.log('this.listData', this.listData);
				
				//获取所有页面的栈实例列表
				let pages = getCurrentPages();
				//当前页面
				let nowPage = pages[pages.length - 1];
				//上个页面
				let prevPage = pages[pages.length- 2];
				//计算总费用
				var totalAmount = 0;
				this.listData = this.listData.filter(
					item => {
						return (item.commercialInsuranceName && item.amountInsured && item.insuranceExpenses);
					}
				)
				
				for (let item of this.listData) {
					totalAmount += parseFloat(item.insuranceExpenses);
				}
				let str = '已添加' + this.listData.length.toString() + '项';
				// prevPage.$vm.detailData.commercialInsuranceRecordList = this.listData;
				// // prevPage.$vm.insuranceCommercialDto.commercialInsuranceRecordList = this.listData;
				// prevPage.$vm.detailData.insuranceManage.commercialAmount = totalAmount.toString();
				// // prevPage.$vm.insuranceCommercialDto.commercialAmount = totalAmount.toString();
				// prevPage.$vm.commercialTypeTitle = str;

        uni.$emit('addInsType', {
          commercialInsuranceRecordList:this.listData,
          commercialAmount:totalAmount.toString(),
          commercialTypeTitle:str
        })
				
				uni.navigateBack()
			}
		}
	}
	
</script>

<style lang="scss">
	.list-add {
		line-height: 88rpx;
		border-radius: 8rpx;
		background-color: rgba($color: #1573FF, $alpha: 0.26);
		color: #1573FF;
	}
	.u-form {
		margin: 10px;
		padding: 22rpx;
		background-color: $xz-bgColor-write;
	}
	.delete {
		display: flex;
		color: $xz-textColor-red;
		font-size: 24rpx;
		justify-content: flex-end;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}
	.bottom {
		position: fixed;
		width: 100%;
		height: 120rpx;
		bottom: 0;
		z-index: 999;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
		color: $xz-textColor-FF;

	}
	.bottom-add {
		width: 90%;
		line-height: 88rpx;
		border-radius: 44rpx;
		background-color: $xz-bgColor-blue;
		color: $xz-textColor-FF;
		font-size: 30rpx;
		margin: 11rpx;
		
	}
	
</style>
